<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="element-plus/vue.global.js"></script>
    <link rel="stylesheet" href="element-plus/index.css"/>
    <script src="element-plus/index.full.js"></script>
    <script src="element-plus/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="phone_id" label="手机编号"/>
        </el-table-column>
        <el-table-column prop="phone_name" label="手机名称"/>
        </el-table-column>
        <el-table-column prop="brand_name" label="手机品牌"/>
        </el-table-column>
        <el-table-column prop="phone_color" label="手机颜色"/>
        </el-table-column>
        <el-table-column prop="phone_news" label="手机成色"/>
        </el-table-column>
        <el-table-column prop="create_date" label="创建日期"/>
        </el-table-column>
    </el-table>
    <!--弹出框-->
    <div>
        <el-button size="small" type="success" @click="handAdd">添加手机</el-button>
    </div>


    <!-- 弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="房间信息" width="500">
        <el-form :model="phone">

            <el-form-item label="手机名称" :label-width="formLabelWidth">
                <el-input v-model="phone.phone_name" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="手机品牌" :label-width="formLabelWidth">
                <el-select v-model="phone.brand_id" placeholder="请选择类型">
                    <!-- key,value:提交的值  label:显示的值 -->
                    <el-option v-for="item in BrandOption" :key="item.brand_id" :value="item.brand_id" :label="item.brand_name"/>
                </el-select>
            </el-form-item>

            <el-form-item label="手机颜色" :label-width="formLabelWidth">
                <el-input v-model="phone.phone_color" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="手机成色" :label-width="formLabelWidth">
                <el-input v-model="phone.phone_news" autocomplete="off"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="btn-primary" @click="AddPhone()">添加</el-button>
                <el-button type="primary" @click="checkCneal()">取消</el-button>
            </div>
        </template>
        </el-form>
    </el-dialog>

</div>


<script>
    const {createApp, ref, onMounted, reactive} = Vue;

    createApp({
        setup() {
            const phone=reactive({
                phone_id:'',
                phone_name:'',
                brand_id:'',
                phone_color:'',
                phone_news:'',
                create_date:'',
            })
            //手机品牌数据
            const BrandOption=ref([])

            const selectBrand=async ()=>{
                const res = await axios.get('/FindAllBrand')
                console.log("这个",res.data)
                BrandOption.value=res.data;
                console.log(BrandOption.value)
            }
            //添加方法
            const AddPhone=async ()=>{
                const res = await axios.get('/AddPhone',{params: phone})
                Object.keys(phone).forEach(key => {
                    phone[key] = '';
                });
                selectPhone();
                dialogFormVisible.value=false

            }
            //取消
            const checkCneal=async ()=>{
                dialogFormVisible.value=false;
            }
            //添加按钮
            const handAdd=async ()=>{
                        dialogFormVisible.value=true
            }
            //查询手机所有
            const tableData = ref([])
            const selectPhone = async () => {
                const res = await axios.get('/selectPhone')
                tableData.value = res.data;
            }
            //弹出框
            const dialogFormVisible = ref(false)
            onMounted(()=>{
             selectBrand();
             selectPhone();
            })



            return {dialogFormVisible,
                BrandOption,
                selectBrand,
                phone,
                AddPhone,
                handAdd,
                checkCneal,
                tableData,
                selectPhone
            }
        },
        // 全部引入ElementPlus
    }).use(ElementPlus).mount('#app')
</script>
</body>
</html>